<template>
    <div class="top">
        <div class="left">
            <el-input v-model="input" class="w-50 m-2" size="large" placeholder="请输入搜索关键字" />
            <div class="button">
                <el-button type="primary" class="btn">搜索</el-button>
            </div>
        </div>

        <div class="right">
            <el-select v-model="value" filterable placeholder="状态" size="large" class="select">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <div class="button">
                <el-button type="primary" class="btn">筛选</el-button>
            </div>
        </div>
        <div class="addDictionarySon">
            <div class="button">
                <el-button type="primary" class="btn" @click="dialogFormVisible = true">新增字典子列表</el-button>
                <el-dialog v-model="dialogFormVisible" title="新增字典">

                    <el-form :model="form" class="hh">
                        <el-form-item label="字典标签" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off" class="ww" />
                        </el-form-item>
                        <el-form-item label="字典键值" :label-width="formLabelWidth">
                            <el-input v-model="form.keyValue" autocomplete="off" class="ww" />
                        </el-form-item>
                    </el-form>


                    <el-form :model="form" class="hh">
                        <el-form-item label="排序号" :label-width="formLabelWidth">
                            <el-input v-model="form.sortNumber" autocomplete="off" class="ww" />
                        </el-form-item>
                        <el-form-item label="状态" :label-width="formLabelWidth">
                            <el-select v-model="form.state" placeholder="请选择" class="hw">
                                <el-option label="正常" value="正常" class="ww" />
                                <el-option label="停用" value="停用" class="ww" />
                            </el-select>
                        </el-form-item>
                    </el-form>


                    <el-form-item label="参数描述" style="width: 83%; margin: 0 70px;">
                        <el-input type="textarea" :rows="2" v-model="form.desc"></el-input>
                    </el-form-item>

                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="dialogFormVisible = false">
                                保存
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
                <el-button type="primary" class="btn1">返回</el-button>
            </div>
        </div>
    </div>

    <!-- 表格 -->
    <div class="from">
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column type="selection" width="65" align="center" />
            <el-table-column prop="userName" label="字典标签" align="center" />
            <el-table-column prop="id" label="字典键值" align="center" />
            <el-table-column prop="sort" label="排序号" align="center" width="150" />
            <el-table-column prop="state" label="状态" align="center" width="150" />
            <el-table-column prop="time" label="更新时间" align="center" />
            <el-table-column label="操作" align="center">
                <template #default="scope" class="middle">
                    <span @click="handleView(scope.$index, scope.row)" class="view">字典子列表</span>
                    <span @click="handleEdit(scope.$index, scope.row)" class="edit">编辑</span>
                    <span @click="handleStop(scope.$index, scope.row)" class="stop">停用</span>
                    <span @click="handleDel(scope.$index, scope.row)" class="del">删除</span>
                </template>
            </el-table-column>

        </el-table>

        <div class="anyDel">批量删除</div>
    </div>
    <div class="page">
        <el-pagination background layout="prev, pager, next" :total="1000" />

    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ref, reactive } from "vue"
export default defineComponent({
    setup() {
        const input = ref("")
        const value = ref("")
        const dialogFormVisible = ref(false)
        const formLabelWidth = '140px'

        const form = reactive({
            name: '',
            keyValue:'',
            sortNumber:'',
            state:'',
            desc:''
        })
        const options = [
            {
                value: "正常",
                label: "正常"
            },
            {
                value: "停用",
                label: "停用"
            }
        ]
        //表格
        interface User {
            time: string
            userName: string
            id: string
            sort: number
            state: string
        }
        const tableRowClassName = ({
            row,
            rowIndex,
        }: {
            row: User
            rowIndex: number
        }) => {
            if (rowIndex === 1) {
                return 'warning-row'
            } else if (rowIndex === 3) {
                return 'success-row'
            }
            return ''
        }
        const tableData: User[] = [
            {
                userName: '是',
                id: '1',
                sort: 40,
                state: '正常',
                time: ""

            },
            {
                userName: '否',
                id: '1',
                sort: 40,
                state: '正常',
                time: ""
            },
            {
                userName: '否',
                id: '1',
                sort: 40,
                state: '正常',
                time: ""
            },
            {
                userName: '否',
                id: '1',
                sort: 40,
                state: '正常',
                time: ""
            },
        ]
        //表格操作
        const handleView = (index: number, row: User) => {

        }
        const handleEdit = (index: number, row: User) => {
            console.log(index, row)
        }
        const handleStop = (index: number, row: User) => {
            console.log(index, row)
        }
        const handleDel = (index: number, row: User) => {
            console.log(index, row)
        }

        return {
            input,
            value,
            options,
            tableData,
            tableRowClassName,
            handleEdit,
            handleDel,
            handleStop,
            handleView,
            form,
            dialogFormVisible,
            formLabelWidth,

        }
    }


})


</script>

<style scoped>
.anyDel {
    margin-top: 18px;
    color: #00ccff;
}

.page {
    margin-top: 48px;
}

.top {
    display: flex;
    margin-left: 18px;
    margin-top: 18px;
}

.select {
    width: 134px;
}

.right {
    display: flex;
    margin-left: 66px;
}

.left {
    width: 340px;
    display: flex;

}

.button {
    margin-left: 10px;
}

.btn {
    height: 38px;
}

.btn1 {
    height: 38px;
    margin-left: 30px;
}

.del {
    color: #ff3300;
    margin-left: 18px;
    font-weight: 600;
    cursor: pointer;
}

.view {
    color: #00ccff;
    margin-left: 18px;
    font-weight: 600;
    cursor: pointer;
}

.stop {
    color: #ff9933;
    margin-left: 18px;
    font-weight: 600;
    cursor: pointer;
}

.edit {
    color: #00cc99;
    margin-left: 18px;
    font-weight: 600;
    cursor: pointer;
}

.from {
    margin-top: 80px;

}

.addDictionarySon {
    position: relative;
    left: 470px;
}

.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
.hh {
    display: flex;
}

.ww {
    width: 100%;
}
.hw{
    width: 90%;
}
</style>